<template>
  <div class="map_box">
    <baidu-map
      class="bmView"
      :scroll-wheel-zoom="true"
      :center="center"
      :zoom="zoom"
      :map-click="false"
      @moveend="syncCenterAndZoom"
      @zoomend="syncCenterAndZoom"
      @ready="mapReady"
      ak="HlMs7bB8XxHiWZirZKHoQoZgPZwDU7g4"
    >
      <bm-local-search class="search_box" v-if="keyword!=''" :panel='false' :keyword="keyword" :forceLocal="true" @searchcomplete='searchcomplete' :auto-viewport="false" :location="location"></bm-local-search>
      <bml-heatmap class="heat_map" :data="data" :max="100" :radius="20"></bml-heatmap>
      <bm-view style="width: 100%; height:100%; flex: 1"></bm-view>
      <div v-for="(marker,ind) in markers" :key="'m_'+ind">
        <bm-marker
          :position="{lng: marker.lng, lat: marker.lat}"
          :icon="getIcon(marker)"
          animation="BMAP_ANIMATION_BOUNCE"
          @mouseover="markerClick(marker)"
        ></bm-marker>
      </div>
      <bm-overlay
        @mouseleave.native="closeMark"
        v-if="active"
        pane="labelPane"
        :class="{sample: true}"
        @draw="draw"
      >
        <div v-if="selectMarker.type==='u'">
          <div class="pointer_img">
            <img v-if="selectMarker.img" :src="selectMarker.img" alt />
          </div>
          <div class="pointer_name">{{selectMarker.name}}</div>
          <div class="pointer_phone">{{selectMarker.phone}}</div>
        </div>
        <div v-if="selectMarker.type==='p'">
          <div class="pointer_title">{{selectMarker.name}}</div>
          <div class="pointer_info">车位总数：{{selectMarker.all}}</div>
          <!--                    <div class="pointer_info">-->
          <!--                        可预约车位数：{{selectMarker.count}}-->
          <!--                    </div>-->
          <div class="pointer_info">实时泊位数：{{selectMarker.real_time}}</div>
          <div class="pointer_info">共享车位数：{{selectMarker.share}}</div>
          <div class="pointer_info">收费规则：{{selectMarker.feeDesc}}</div>
        </div>
        <!-- <div v-if="selectMarker.type==='b'">
          <div class="pointer_title">位置</div>
          <div class="pointer_info">{{selectMarker.street_name}}</div>
          <div class="pointer_info">已检测数量：{{selectMarker.checked_num}}</div>
          <div class="pointer_info">异常数量：{{selectMarker.anomaly_num}}</div>
        </div> -->
        <div v-if="selectMarker.type==='b'">
            <div class="pointer_title">
                {{selectMarker.street_name}}
            </div>
            <div class="pointer_info">
              合计：{{selectMarker.anomaly_num}}   
            </div>
            <div class="pointer_info">
                美团：{{selectMarker.meituan}}
            </div>
            <div class="pointer_info">
                青桔：{{selectMarker.qingju}}
            </div>
            <div class="pointer_info">
                哈罗：{{selectMarker.haluo}}
            </div>
            
        </div>
        <div v-if="selectMarker.type==='ug'">
          <div class="pointer_title">位置：{{selectMarker.address}}</div>
          <div class="pointer_info">运管员总数：{{selectMarker.users}}</div>
          <div class="pointer_info">
            <el-row>
              <el-col :span="12">
                <div class="point_line_tongji line1">
                  <i></i>
                  准停:{{selectMarker.line1}}
                </div>
              </el-col>
              <el-col :span="12">
                <div class="point_line_tongji line2">
                  <i></i>
                  禁停:{{selectMarker.line2}}
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="pointer_info">
            <el-row>
              <el-col :span="12">
                <div class="point_line_tongji line3">
                  <i></i>
                  限停:{{selectMarker.line3}}
                </div>
              </el-col>
              <el-col :span="12">
                <div class="point_line_tongji line4">
                  <i></i>
                  临停:{{selectMarker.line4}}
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </bm-overlay>
    </baidu-map>
  </div>
</template>

<script>
import selfPointerIcon from "@/assets/images/pointer_icon.png";
import selfPointerIcon1 from "@/assets/images/pointer_icon1.png";
import selfPointerIcon2 from "@/assets/images/pointer_icon2.png";
import { BmlHeatmap, Autocomplete } from "vue-baidu-map";
export default {
  data() {
    return {
      BMap: null, // 地图组件是否就绪
      choosedLocation: { province: "", city: "", district: "", addr: "" },
      show: false,
      active: false,
      center: { lng: 0, lat: 0 },
      zoom: 12,
      selfPointerU: {
        url: selfPointerIcon,
        size: { width: 32, height: 32 },
      },
      selfPointerP: {
        url: selfPointerIcon1,
        size: { width: 32, height: 32 },
      },
      selfPointerB: {
        url: selfPointerIcon2,
        size: { width: 32, height: 32 },
      },
      selectMarker: {
        lng: 0,
        lat: 0,
        type: "u",
        all: "",
        count: "",
        share: "",
        img: "",
        name: "",
        phone: "",
        checked_num: "",
        street_name: "",
        anomaly_num: "",
        users: "",
        address: "",
        line1: "",
        line2: "",
        line3: "",
        line4: "",
        haluo:'',
        meituan:'',
        qingju:''
      },
      center: {
        lng: 117.022306,
        lat: 36.667463,
      },
    };
  },
  props: {
    data: {
      type: Array,
      default: [],
    },
    markers: {
      type: Array,
      default() {
        return [
          // {
          //     "lng": "116.404",//统计位置坐标
          //     "lat": "39.915",//统计位置坐标
          //     "type": "ug",//类型ug为运管员统计类型
          //     "line1": "1222",//准停
          //     "line2": "1233",//禁停
          //     "line3": "1244",//限停
          //     "line4": "1255",//临停
          //     "address": "历下区",//统计位置地址
          //     "users": "32"//运管员汇总数量
          // }
          /*{
                        lng: 116.404,
                        lat: 39.915,
                        type: 'u',
                        img: '',
                        name: '张三',
                        phone: '123456789'
                    }, {
                        lng: 115.504,
                        lat: 39.915,
                        type: 'p',
                        name: 'xxxx停车位',
                        all: '300',//所有
                        count: '200',//预约
                        share: '100'//共享
                    }, {
                        lng: 115.594,
                        lat: 39.915,
                        type: 'b',
                        address: '龙奥北路',//地址
                        count: '200',//检测数量
                        exception: '100'//异常数量
                    }*/
        ];
      },
    },
    keyword:{
      type:String,
      value:''
    },
    location:{
      type:String,
      value:''
    }
  },
  components: {
    BmlHeatmap,
  },
  methods: {
    searchcomplete(res){
      console.log("res",res)
      if(res.Hr){
        this.$emit('getSearchAddress',res.Hr)
      }
    },
    onHideMarker() {
      this.active = false;
      this.selectMarker = {
        lng: 0,
        lat: 0,
        type: "u",
        all: "",
        count: "",
        share: "",
        img: "",
        name: "",
        phone: "",
        checked_num: "",
        street_name: "",
        anomaly_num: "",
        users: "",
        address: "",
        line1: "",
        line2: "",
        line3: "",
        line4: "",
      };
    },
    /** *
     * 地图点击事件。
     */
    getClickInfo(e) {
      // 调整地图中心位置
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;

      // 此时已经可以获取到BMap类
      if (this.BMap) {
        const that = this;
        // Geocoder() 类进行地址解析
        // 创建地址解析器的实例
        const geoCoder = new this.BMap.Geocoder();
        // getLocation() 类--利用坐标获取地址的详细信息
        // getPoint() 类--获取位置对应的坐标
        geoCoder.getLocation(e.point, function (res) {
          // console.log('获取经纬度', e.point, '获取详细地址', res)
          const addrComponent = res.addressComponents;
          const surroundingPois = res.surroundingPois;
          const province = addrComponent.province;
          const city = addrComponent.city;
          const district = addrComponent.district;
          let addr = addrComponent.street;
          if (surroundingPois.length > 0 && surroundingPois[0].title) {
            if (addr) {
              addr += `-${surroundingPois[0].title}`;
            } else {
              addr += `${surroundingPois[0].title}`;
            }
          } else {
            addr += addrComponent.streetNumber;
          }
          that.choosedLocation = {
            province,
            city,
            district,
            addr,
            ...that.center,
          };
          that.$emit("changeCenter", {
            zoom: that.zoom,
            location: that.choosedLocation,
          });
        });
      }
    },
    syncCenterAndZoom(e) {
      // 返回地图当前的缩放级别
      this.zoom = e.target.getZoom();
      const position = e.target.getCenter();
      // 此时已经可以获取到BMap类
      if (this.BMap) {
        const that = this;
        // Geocoder() 类进行地址解析
        // 创建地址解析器的实例
        const geoCoder = new this.BMap.Geocoder();
        // getLocation() 类--利用坐标获取地址的详细信息
        // getPoint() 类--获取位置对应的坐标
        geoCoder.getLocation(position, function (res) {
          // console.log('获取经纬度', position, '获取详细地址', res)
          const addrComponent = res.addressComponents;
          const surroundingPois = res.surroundingPois;
          const province = addrComponent.province;
          const city = addrComponent.city;
          const district = addrComponent.district;
          let addr = addrComponent.street;
          if (surroundingPois.length > 0 && surroundingPois[0].title) {
            if (addr) {
              addr += `-${surroundingPois[0].title}`;
            } else {
              addr += `${surroundingPois[0].title}`;
            }
          } else {
            addr += addrComponent.streetNumber;
          }
          that.choosedLocation = {
            province,
            city,
            district,
            addr,
            ...position,
          };
          that.$emit("changeCenter", {
            zoom: that.zoom,
            location: that.choosedLocation,
          });
        });
      }
    },
    showPersonPoint(ind) {
      this.center.lng = this.markers[ind].lng;
      this.center.lat = this.markers[ind].lat;
      this.markerClick(this.markers[ind]);
    },
    getIcon(marker) {
      // return {
      //     url:marker.icon,
      //     size: {width: 32, height: 32}
      // }
      if (marker.type === "u") {
        return this.selfPointerU;
      } else if (marker.type === "p") {
        return this.selfPointerP;
      } else if (marker.type === "b") {
        return this.selfPointerB;
      } else if (marker.type === "ug") {
        return this.selfPointerU;
      }
    },
    draw({ el, BMap, map }) {
      const pixel = map.pointToOverlayPixel(
        new BMap.Point(this.selectMarker.lng, this.selectMarker.lat)
      );
      el.style.left = pixel.x - 80 + "px";
      el.style.top = pixel.y - 135 + "px";
    },
    // syncCenterAndZoom(e) {
    //   // 返回地图当前的缩放级别
    //   this.zoom = e.target.getZoom();
    //   const position = e.target.getCenter();
    //   // 此时已经可以获取到BMap类
    //   if (this.BMap) {
    //     const that = this;
    //     // Geocoder() 类进行地址解析
    //     // 创建地址解析器的实例
    //     const geoCoder = new this.BMap.Geocoder();
    //     // getLocation() 类--利用坐标获取地址的详细信息
    //     // getPoint() 类--获取位置对应的坐标
    //     geoCoder.getLocation(position, function (res) {
    //       // console.log('获取经纬度', position, '获取详细地址', res)
    //       const addrComponent = res.addressComponents;
    //       const surroundingPois = res.surroundingPois;
    //       const province = addrComponent.province;
    //       const city = addrComponent.city;
    //       const district = addrComponent.district;
    //       let addr = addrComponent.street;
    //       if (surroundingPois.length > 0 && surroundingPois[0].title) {
    //         if (addr) {
    //           addr += `-${surroundingPois[0].title}`;
    //         } else {
    //           addr += `${surroundingPois[0].title}`;
    //         }
    //       } else {
    //         addr += addrComponent.streetNumber;
    //       }
    //       that.choosedLocation = {
    //         province,
    //         city,
    //         district,
    //         addr,
    //         ...position,
    //       };
    //       that.$emit("changeCenter", {
    //         zoom: that.zoom,
    //         location: that.choosedLocation,
    //       });
    //     });
    //   }
    // },
    mapReady({ BMap, map }) {
      let mapStyle = { style: "midnight" };
      map.setMapStyle(mapStyle);
      // console.log(BMap, map);
      // var view = map.getViewport(eval(this.markers))
      // this.zoom = view.zoom;
      // this.center = view.center;
      // const that = this
      this.BMap = BMap;
      // if (this.BMap) {
      //     // 获取定位地址信息并赋值给声明变量
      //     // Geolocation 对象的 getCurrentPosition()、watchPosition()、clearWatch() 方法详解 ：https://blog.csdn.net/zyz00000000/article/details/82774543
      //     const geolocation = new this.BMap.Geolocation()
      //     // 通过 getCurrentPosition() 方法：获取当前的位置信息
      //     geolocation.getCurrentPosition(res => {
      //         console.log('返回详细地址和经纬度', res)
      //         const { lng, lat } = res.point
      //         const { province, city, district, street, street_number } = res.address
      //
      //         that.center = { lng, lat }
      //         that.choosedLocation = { province, city, district, addr: street + street_number, lng, lat }
      //         console.log(that.choosedLocation)
      //     })
      // }
      //this.$emit("getBMap",this.BMap,this.map)
    },
     markerClick(obj){
                this.active = false
                // this.selectMarker.lng = obj.lng
                // this.selectMarker.lat = obj.lat
                // this.selectMarker.type = obj.type
                
                if(obj.type === 'u'){
                    this.selectMarker.img = obj.img
                    this.selectMarker.name = obj.name
                    this.selectMarker.phone = obj.phone
                    this.selectMarker.lng = obj.lng
                    this.selectMarker.lat = obj.lat
                    this.selectMarker.type = obj.type
                }else if(obj.type === 'p'){
                    this.selectMarker.all = obj.all
                    this.selectMarker.name = obj.name
                    this.selectMarker.count = obj.count
                    this.selectMarker.real_time = obj.real_time

                    this.selectMarker.share = obj.share
                    this.selectMarker.lng = obj.lng
                    this.selectMarker.lat = obj.lat
                    this.selectMarker.type = obj.type
                }else if(obj.type === 'b'){
                    
                    this.selectMarker.street_name = obj.street_name
                    this.selectMarker.anomaly_num = obj.anomaly_num
                    this.selectMarker.checked_num = obj.checked_num
                    this.selectMarker.lng = obj.lng
                    this.selectMarker.lat = obj.lat
                    this.selectMarker.type = obj.type
                    this.selectMarker.qingju = obj.qingju
                    this.selectMarker.meituan = obj.meituan
                    this.selectMarker.haluo = obj.haluo
                }else if(obj.type === 'ug'){
                    // "line1": "12",//临停
                    // "line2": "12",//禁停
                    // "line3": "12",//限停
                    // "line4": "12",//准停
                    // "address": "历下区",//统计位置地址
                    // "users": "32"//运管员汇总数量
                    this.selectMarker.address = obj.address
                    this.selectMarker.users = obj.users
                    this.selectMarker.line1 = obj.line1
                    this.selectMarker.line2 = obj.line2
                    this.selectMarker.line3 = obj.line3
                    this.selectMarker.line4 = obj.line4
                    this.selectMarker.lng = obj.lng
                    this.selectMarker.lat = obj.lat
                    this.selectMarker.type = obj.type
                }
                setTimeout(() => {
                    this.active = true
                },100)
            },
            closeMark() {
                this.active = false
            },
  },

  mounted() {
    // 创建和初始化地图函数
    console.log(this.keyword)
  },
};
</script>

<style scoped>
    .map_box{
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        z-index: 99;
       background: #030D24;
    }
    .bmView{
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        background-color: #08304A!important;
    }
    .bmView>div{
        background-color: #08304A!important;
    }
    .bmView  .BMap_pop {
      background-color:#fff!important
    }
    .bmView .BMap_pop .BMap_top{
      background-color:#fff!important
    }
    .search_box{
       background-color: #fff!important;
      width:400px;
      position: absolute;
      left:12px;
      top:150px;
      z-index: 2000;
    }
    .search_box>div{
        background-color: #fff!important;
    }
    /* .search_box div ol li span{
      color: #fff!important;
    }
    .search_box div ol li a{
      color: #31F9B1!important;
    } */
</style>
<style>
    .bmView .sample {
        width: 180px;
        height: 170px;
        line-height: 40px;
        overflow: hidden;
        color: #32FFB4;
        text-align: center;
        position: absolute;
        background-image: url("~@/assets/images/map_pointer.png");
        background-position: 0 0;
        background-size:100% 100%;
        background-repeat: no-repeat;
         /* background-color: transparent!important; */
    }
    .pointer_img{
        margin:12px auto 0 auto;
        width:32px;
        height:32px;
        border-radius: 32px;
        background: #fff;
        overflow: hidden;
    }
    .pointer_img img{
        width:32px;
        height:32px;
        display: block;
        padding:0;
        margin:0;
    }
    .pointer_name{
        padding:8px 0 4px 0;
        font-size:14px;
        font-family:SourceHanSansSC-Normal,SourceHanSansSC;
        font-weight:800;
        color:#32FFB4;
        line-height:18px;
    }
    .pointer_phone{
        font-size:14px;
        font-family:SourceHanSansSC-Normal,SourceHanSansSC;
        font-weight:800;
        color:#32FFB4;
        line-height:18px;
    }
    .pointer_title{
        font-size:14px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#32FFB4;
        line-height:18px;
        padding:8px 0 4px 16px;
        text-align: left;
    }
    .pointer_info{
        font-size:14px;
        font-family:SourceHanSansSC-Normal,SourceHanSansSC;
        font-weight:400;
        color:#32FFB4;
        line-height:18px;
        text-align: left;
        padding: 0 0 4px 16px;
    }
    .point_line_tongji{
        position:relative;
        padding-left:12px;
        margin-left:-5px;
    }
    .point_line_tongji i{
        position:absolute;
        top:4px;
        left:0px;
        width:10px;
        height:10px;
        border-radius: 10px;
    }
    .line1 i{
        background: #81FF5D;
    }
    .line2 i{
        background: #FF6F6F;
    }
    .line3 i{
        background: #F7B500;
    }
    .line4 i{
        background: #3473FE;
    }
</style>
